/**
 * 客户端信息表单
 * wangmei
 */
import React, { Component } from 'react';
import { Modal, Button, Form, Input, message, Select, Radio, AutoComplete, Row, Col } from 'antd';
import * as Request from '../../../Server/Upgrade';
import * as Const from '../../../common/const';
import qs from 'qs';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class ClientFrom extends Component{
    constructor(props) {
        super(props);
    }

    //保存方法
    handleSubmit = (e) => {
        e.preventDefault();
        const { form, row, id, current, size } = this.props
        form.validateFieldsAndScroll((err, values) => {
            if(!err){
                values.versionId = id;
                values.idMain = values.idMain.replace(/\s*/g,"");
                values.fun = values.fun.replace(/\s*/g,"");
                if(row.id==undefined){ //新增
                    const _param = qs.stringify(values);
                    Request.clientInfoSave(_param).then(res => {
                        if(res && res.code == Const.REQUEST_SUCCESS){
                            this.props.showModelFunc({} , false);
                            this.props.getTableData({page: current?current-1:0, size: size(), vId: id});
                            message.success('新增成功！', 1);
                        }else{
                            res && res.code !== Const.REQUEST_UNAUTHORIZED && message.error(res.msg, 2);
                        }
                    });
                }else {
                    values.id = row.id;
                    const _param = qs.stringify(values);
                    Request.clientInfoUpdate(_param).then(res => {
                        if(res && res.code == Const.REQUEST_SUCCESS){
                            this.props.showModelFunc({} , false);
                            this.props.getTableData({page: current?current-1:0, size: size(), vId: id});
                            message.success('修改成功！', 1);
                        }else{
                            res && res.code !== Const.REQUEST_UNAUTHORIZED && message.error(res.msg, 2);
                        }
                    });
                }
            }
        });
    }

    //校验idMain方法
    validateIdMain = (rule, value, callback) =>{
        const { row } = this.props;
        if(row.id){
            callback();
            return ;
        }
        if(value==''||value==undefined){
            callback('请选择客户端类别信息！');
            return ;
        }
        if(value.length>250){
            callback('客户端类别长度不能超过250个字符');
            return ;
        }
        if(value && value.length){
            const params = {idMain:value, vId: this.props.id};
            Request.clientInfoValidator(qs.stringify(params)).then(res => {
                if(res && Const.REQUEST_SUCCESS == res.code && !res.data){
                    callback('客户端类别已存在,请重新输入!');
                }else{
                    callback();//注意:回调函数必须调用
                }
            });
        }else{
            callback();
        }
    }

    validateFun = (rule, value, callback) =>{
        if(value.length>255){
            callback('函数长度不能超过255个字符');
            return ;
        }
        callback();
    }

    render(){
        const { showModelFunc, row } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 6 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 14 },
            },
        };
      
        return(
            <Modal 
                visible={true}
                width="50%"
                title={row.id?"修改客户端信息":"新增客户端信息"}
                footer={null}
                maskClosable={false}
                onCancel={()=>showModelFunc({} , false)}
            >
                <Form onSubmit={this.handleSubmit} >
                    <FormItem
                        {...formItemLayout}
                        label="客户端类别"
                        >
                        {getFieldDecorator('idMain',{
                            rules: [{
                                required: true, 
                                validator: this.validateIdMain,
                            }],
                            initialValue: row.idMain || '',
                        })(
                            <AutoComplete
                                dataSource={Const.IDMAINDATA}
                                style={{ width: '100%' }}
                                disabled={row.idMain}
                            />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="函数"
                        >
                        {getFieldDecorator('fun', {
                            rules: [{
                                validator: this.validateFun,
                            }],
                            initialValue: row.fun || '',
                        })(
                            <AutoComplete
                                dataSource={Const.FUNDATA}
                                style={{ width: '100%' }}
                            />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="参数"
                        >
                        {getFieldDecorator('param', {
                            initialValue: row.param || '',
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="备注"
                        >
                        {getFieldDecorator('remark', {
                            initialValue: row.remark || '',
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <Row type="flex" style={{ textAlign: 'center'}}>
                        <Col span={24}>
                            <FormItem>
                                <Button type="primary" htmlType="submit"  className="conform-button">保存</Button>
                                <Button type="primary" onClick={()=>showModelFunc({} , false)}>返回</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        )
    }
}

export default Form.create()(ClientFrom)